<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Document</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
html{
    height: 100%;
}
body{
    height: 100%;
    background-color: black;
}
svg{
    width: 100%;
    height: 100%;
    /* opacity: 0; */
}
.word{
    font-size: 22vh;
    font-weight: bold;
    fill: none;
    stroke-width: 12px;
    stroke-dasharray: 90 310;
    animation: drawing 8s linear infinite;
}
.word1{
    stroke:deepskyblue;
    text-shadow: 0 0 30px deepskyblue;
    animation-delay: -2s;
}
.word2{
    stroke:deeppink;
    text-shadow: 0 0 30px deeppink;
    animation-delay: -4s;
}
.word3{
    stroke:rgb(145, 255, 0);
    text-shadow: 0 0 30px rgb(145, 255, 0);
    animation-delay: -6s;
}
.word4{
    stroke:purple;
    text-shadow: 0 0 7px purple;
    animation-delay: -8s;
}

@keyframes drawing{
    100%{
        stroke-dashoffset: -400;
    }
}

</style>
<body>
    <svg>
        <text text-anchor='middle' x='50%' y='50%' class="word word1"></text>
        <text text-anchor='middle' x='50%' y='50%' class="word word2"></text>
        <text text-anchor='middle' x='50%' y='50%' class="word word3"></text>
        <text text-anchor='middle' x='50%' y='50%' class="word word4"></text>
    </svg>
</body>
<script src="../Wings.js"></script>
<script>
    function Time(){
        this.svg = document.querySelector('svg')
        this.texts = this.svg.querySelectorAll('text')
    }

    // 获取与处理时间格式的方法
    Time.prototype.setTime = function(){
        // 获取当前时间
        this.time = new Date()
        // 分别获取当前的时分秒，前两步可以合并
        this.h = this.time.getHours()
        this.m = this.time.getMinutes()
        this.s = this.time.getSeconds()
        // 调用处理时间的方法
        this.handleTime()

        return this.h+":"+this.m+":"+this.s
    }

    // 处理时间数值的方法，使时间保持两位数
    Time.prototype.handleTime = function(){
        if(this.h<10){
            this.h = "0" + this.h
        }
        if(this.m<10){
            this.m = "0" + this.m
        }
        if(this.s<10){
            this.s = "0" + this.s
        }
    }

    // 将获取到的时间赋值到svg标签中
    Time.prototype.setSvg = function(){
        setInterval(()=>{
            this.texts.forEach((item,i)=>{
                item.innerHTML = this.setTime()
            })
        },1000)
        move(this.svg,{
            opacity:'1'
        })
    }

    var t = new Time()
    t.setSvg()
</script>
</html>
